<template>
    <div class="contanier">
        <!-- 大屏展示区 -->
        <div class="screen" ref="screenRef">
            <!-- 顶部 -->
            <div class="top">
                <top />
            </div>
            <!-- 底部 -->
            <div class="bottom">
                <bottom />
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
/**
 * description：大屏首页
 * author：rz
 * date:2024-08-04
 */
import { ref, reactive } from 'vue'
import { onMounted } from 'vue';
import top from './components/top.vue'
import bottom from './components/bottom.vue'

let screenRef = ref();

onMounted(() => {
    // 更新缩放比
    screenRef.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})


// 定义缩放比
function getScale(w = 1920, h = 1080) {
    const ww = window.innerWidth / w;
    const wh = window.innerHeight / h;
    return ww < wh ? ww : wh;
}

// 监听视口变化
window.onresize = () => {
    screenRef.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}

</script>
<style scoped lang="scss">
.contanier {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/screen/bg.png') no-repeat;
    background-size: cover;

    .screen {
        position: fixed;
        width: 1920px;
        height: 1080px;
        top: 50%;
        left: 50%;
        transform-origin: left top;

        .top {
            width: 100%;
            height: 40px;
        }

        .bottom {
            width: 100%;
            height: calc(100% - 40px);
        }
    }
}
</style>